<template>
	<!-- vuew
	vb3
	-->
	<div>
		<!-- vcl {类名:boolean,类名:布尔值} -->
		<div :class="{ red: iscolor, 'txt-align': true }">class 的绑定</div>
		<div :class="{ red: iscolor, fs40: isfs40 }">多个类名 class 的绑定</div>
		<!-- 控制的样式,只能控制2个样式,不能增加 -->
		<!-- 可以增加和删除属性了 -->
		<div :class="obj">对象绑定</div>
		<!-- vsty -->
		<div :style="{ 'font-size': '40px' }">我是style</div>

		<!-- 数组类型的绑定 多个的类名  -->
		<div class="red" :class="['fs40','txt-align']">本身就有1个样式</div>
		<!-- 数组绑定 希望通过 变量来控制 -->

		<div class="red" :class="[isfs40?'fs40':'','txt-align']">本身就有1个样式</div>
		<!--  直接给数组 -->
		<div class="red" :class="arr">直接和数组绑定</div>
	</div>
</template>

<script setup>
	import { ref, reactive } from 'vue'
	let classname = ref('red')
	let iscolor = ref(true)
	let isfs40 = ref(true)

	let arr = ref(['fs40','txt-align'])

	let obj = reactive({
		red: true,
		fs40: false,
		// 类里边有-
		'txt-align': true
	})

	setTimeout(() => {
		obj.fs40 = true
		obj.bg = true
	}, 3000)

	setTimeout(() => {
		delete obj.bg
	}, 5000)
</script>

<style scoped>
	.red {
		color: red;
	}
	.fs40 {
		font-size: 40px;
	}
	.txt-align {
		text-align: center;
	}
	.bg {
		background-color: black;
	}
</style>
